<template>
    <div class="nav-bar">
        <van-nav-bar  
        :title="$route.meta.title ? $route.meta.title : '标题'" 
        :left-text="!$route.meta?.showTabBar? '返回' : ''"
        :left-arrow="!$route.meta?.showTabBar"
        @click-left="onClickLeft" 
        @click-right="onClickRight"
        clickable>
        
            <template #right>
                <van-popover
                v-model:show="showPopover"
                :actions="actions"
                placement="bottom-end"
                @select="onSelect"
                >
                <template #reference>
                    <van-icon name="ellipsis" size="18" color="black" />
                </template>
                </van-popover>

                
            </template>
        
        </van-nav-bar>
    </div>
</template>

<script>
export default {
    name: 'NavBar',
    data() {
        return {
            showPopover: false,
            actions: [
                {text: '首页', icon: 'home-o', path: '/home'},
                {text: '购物车', icon: 'cart-o', path: '/cart'},
                {text: '我的订单', icon: 'orders-o', path: '/orders', disabled: true},
                {text: '个人中心', icon: 'contact-o', path: '/mine'},
            ],
        }
    },
    //顶部导航的点击事件
    setup() {
        const onClickLeft = () => history.back();
        const onClickRight = () => console.log('点击了右侧');
        return {
            onClickLeft,
            onClickRight,
        };
    },
    methods:{
        onSelect(action){
            this.$router.replace(action.path)
        }
    }
}
</script>

<style scoped>

</style>
